@block-margin-h: 15px;
@block-margin-v: 22px;
@gray-color: #B5BEC4;
@green-color: #3AA978;
@green-text: #3AA978;
@gray-bg: #F4F4F4;

.share-header {
	@padding: 5px;
	.banner {
		position: relative;
		padding: @padding 78px @padding 44px;
		.logo {
			position: absolute;
			left: @padding;
			top: 0;
			bottom: 0;
			margin: auto 0;
			width: 35px;
			height: 35px;
			background: no-repeat center center url(../img/logo.png);
			background-size: cover;
		}
		.over-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.com-name {
			color: @green-text;
			font-size: 12px;
			.over-text;
		}
		.slogan {
			color: @gray-color;
			font-size: 11px;
			.over-text;
		}
		.btn-download {
			position: absolute;
			height: 30px;
			line-height: 30px;
			font-size: 13px;
			padding: 0 5px;
			top: 0;
			bottom: 0;
			margin: auto 0;
			right: @padding;
		}
	}
	.recommend-container {
		background-color: @gray-bg;	
		.recommend {
			position: relative;
			padding: 20px 0 20px 60px;
			margin: 0 auto;
			width: 200px;
			.avatar {
				position: absolute;
				left: 0;
				width: 44px;
				height: 44px;
				border-radius: 50%;
				background-color: gray;
			}
			.msg {
				position: relative;
				min-width: 70px;
				padding: 15px;
				background-color: #fff;
				border: 1px solid #cecece;
				border-radius: 8px;
				.user-name {
					color: @green-text;
				}
				&:before {
					content: "";
					position: absolute;
					width: 11px;
				   	height: 11px;	
					left: -7px;
					background: #fff;
					border: solid #cecece;
					border-width: 1px 0 0 1px;
					-webkit-transform: rotateZ(-45deg);
				}
			}
		}
	}
}

.banner {
	position: relative;
	img {
		display: block;
		width: 100%;
	}
	h1 {
		position: absolute;
		left: 17px;
		right: 17px;
		bottom: 19px;
		height: 80px;
		color: #fff;
		font-size: 20px;
	}
	.tag {
		position: absolute;
		right: 25px;
		bottom: 26px;
		background: #3AA978;
		border-radius: 4px;
		padding: 2px 8px;
		font-size: 13px;
		color: #fff;
		line-height: 17px;
	}
}

.initiator-info {
	position: relative;
	margin: @block-margin-v @block-margin-h;
	padding-left: 54px;
	.avatar {
		position: absolute;
		left: 0;
		top: 0;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background-color: gray;
	}
	.name {
		font-size: 15px;
	}
	.desc {
		font-size: 12px;
		color: @gray-color;
	}
}

.btn-container {
	padding: 6px 10px;
	box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.15)
}

.info-block {
	font-size: 15px;
	margin: @block-margin-v @block-margin-h; 
	h2 {
		margin-bottom: 15px;
		font-size: 13px;
		line-height: 13px;
		color: @gray-color; 
		&.phone {
			font-size: 15px;
			color: @green-color;
			a {
				margin-left: -5px;
			}
		}
		&:before {
			content: "";
			display: inline-block;
			width: 14px;
			height: 16px;
			margin-right: 10px;
			vertical-align: bottom;
			background: no-repeat center center;
			background-size: contain;
		}
	}
	.desc:before {
		background-image: url(../img/flag.png);
	}
	.guest:before {
		background-image: url(../img/head.png);
	}
	.time:before {
		background-image: url(../img/schedule.png);
	}
	.location:before {
		background-image: url(../img/pin.png);
	}
	.phone:before {
		background-image: url(../img/phone.png);
	}
	.cost:before {
		background-image: url(../img/rmb.png);
	}
	&.event-time {
		span {
			font-size: 14px;
			color: @gray-color;
		}
	}
	&.event-cost {
		li {
			position: relative;
			margin-bottom: 30px;
			span {
				position: absolute;
				right: 0;
			}
			&.member-cost {
				color: #DBB786;
			}
		}
	}
	&.event-guest {
		margin: 0;
		padding: 22px 15px;
		background-color: @gray-bg;
		.cards {
			margin: 0 -15px;
			overflow: scroll;
		}
		.name {
			margin-top: 10px;
			font-size: 15px;
			text-align: center;
		}
		.desc {
			margin-top: 7px;
			font-size: 12px;
			color: @gray-color;
			text-align: center;
		}
		.avatar {
			position: relative;	
			width: 50px;
			height: 50px;
			margin: 10px auto 0;
			background: no-repeat center center;
			background-size: cover;
			background-color: gray;
			border-radius: 50%;
			&:after {
				content: "";			
				position: absolute;	
				width: 20px;
				height: 20px;
				bottom: 0;
				right: -5px;
				background: no-repeat center center url(../img/medal.png);
				background-size: cover;
			}
		}
		ul {
			font-size: 0px;
			white-space: nowrap;
			li {
				&:first-child {
					margin-left: 15px;
				}
				&:last-child {
					margin-right: 15px;
				}
				display: inline-block;
				width: 128px;
				height: 135px;
				margin-right: 8px;
				border: 1px solid #D8D8D8;
				background: #fff;
				border-radius: 4px;
			}
		}
	}
}

